<template>
  <div>
    <!-- tab-->
    <div class="detail-table">
      <div
        class="detail-table-item-bl"
        style="
          padding: 0 10px;
          display: flex;
          align-items: center;
          border-top: 1px solid #e9f3ff;
          border-bottom: 1px solid #e9f3ff;
        "
      >
        公众责任保险
      </div>
      <div class="detail-table-item detail-table-item-bl">
        <div class="detail-tab-item-line detail-tab-item-head">保障方案</div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">累计赔偿限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">每次事故赔偿限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">每次事故财产损失赔偿限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">每次事故人身伤亡赔偿限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">每次事故每人赔偿限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">每人医疗费用赔偿限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">保费</div>
        </div>
      </div>

      <div
        class="detail-table-item detail-table-item-hover"
        v-for="(item, index) in fananlist"
        :key="index"
      >
        <div class="detail-tab-item-line detail-tab-item-head">
          <!-- 表头 -->
          {{ info.fananname[index] }}
        </div>

        <div class="detail-tab-item-line">
          {{ chooseDta.fanan[item].total_limit }}
        </div>
        <div class="detail-tab-item-line">
          {{ chooseDta.fanan[item].limit }}
        </div>
        <div class="detail-tab-item-line">
          {{ chooseDta.fanan[item].cc_limit }}
        </div>
        <div class="detail-tab-item-line">
          {{ chooseDta.fanan[item].sw_limit }}
        </div>
        <div class="detail-tab-item-line">
          {{ chooseDta.fanan[item].mr_limit }}
        </div>
        <div class="detail-tab-item-line">
          {{ chooseDta.fanan[item].mryl_limit }}
        </div>
        <div class="detail-tab-item-line" style="color: #f95d4a">
          {{ chooseDta.fanan[item].price_name }}
        </div>
      </div>
    </div>
    <div class="detail-table">
      <div
        class="detail-table-item-bl"
        style="
          padding: 0 10px;
          display: flex;
          align-items: center;
          border-top: 1px solid #e9f3ff;
          border-bottom: 1px solid #e9f3ff;
          width: 105px;
        "
      >
        扩展火灾爆炸责任
      </div>
      <div class="detail-table-item detail-table-item-bl">
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">累计限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">单次限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">每个车位限额</div>
        </div>
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg">保费</div>
        </div>
      </div>
      <div
        class="detail-table-item detail-table-item-hover"
        v-for="(item, index) in fananlist"
        :key="index"
      >
        <div class="detail-tab-item-line">
          {{ info.fire[item].total_limit }}
        </div>
        <div class="detail-tab-item-line">
          {{ info.fire[item].limit }}
        </div>
        <div class="detail-tab-item-line">
          {{ info.fire[item].car_limit }}
        </div>
        <div class="detail-tab-item-line" style="color: #f95d4a">
          {{ info.fire[item].name }}
        </div>
      </div>
    </div>
    <div class="detail-table">
      <div
        class="detail-table-item-bl"
        style="
          padding: 0 10px;
          display: flex;
          align-items: center;
          border-top: 1px solid #e9f3ff;
          border-bottom: 1px solid #e9f3ff;
          width: 105px;
        "
      ></div>
      <div class="detail-table-item detail-table-item-bl">
        <div class="detail-tab-item-line">
          <div class="detail-tab-item-bg" style="color: #f95d4a">总保费</div>
        </div>
      </div>
      <div
        class="detail-table-item detail-table-item-hover"
        v-for="(item, index) in fananlist"
        :key="index"
      >
        <div class="detail-tab-item-line" style="color: #f95d4a">
          {{ info.fire[item].total_price }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    chooseDta: {},
    info: {},
    fananlist: {},
  },
  data() {
    return {};
  },

  mounted() {
    console.log(this.chooseDta);
  },
  methods: {},
};
</script>
<style scoped>
@import "../../assets/css/index/index.css";
@import "../../assets/css/index/detail.css";
.topColor {
  background-color: #f3f3f3;
}

.detail-table-p-table-new {
  display: flex;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}
.detail-table-p-table-nb-new {
  border-top: none;
}

.detail-table-p-table-item1-new {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #dfdfdf;
  border-left: 1px solid #dfdfdf;
}
.detail-table-p-table-item-new {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #dfdfdf;
}

.type_btn_body {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.type_btn {
  width: 130px;
  height: 40px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  margin-right: 20px;
}
.active_btn {
  border: 1px solid #f76b6d;
  color: #ffffff;
  background-color: #f76b6d;
}
</style>
